<template>
	<view class="w100 statusCard fontWeight" :class="auditStatus().class">
		<view class="rowStart" style="gap: 20rpx;">
			<uv-icon :name="auditStatus().name" size="20" color="#fff"></uv-icon>
			<text>
				{{auditStatus().value}}
			</text>
		</view>
		
		<view class="titleH3" v-if="subTitle" style="margin-top: 20rpx; color: #fff;font-weight: normal;">
			{{subTitle}}
		</view>

	</view>
</template>

<script>
	export default {
		name: "auditStatus",
		props: {
			//0 待审核 1审核通过 2审核不通过
			status: {
				type: String,
				default: "",
			},
			subTitle: {
				type: String,
				default: "",
			},
		},
		data() {
			return {};
		},
		methods: {
			auditStatus() {
				let value = ''
				let classs = ''
				let name = ''
				switch (this.status) {
					case '0':
						value = '待审核'
						classs = 'warning'
						name = "error-circle-fill"
						break;
					case '1':
						value = '审核通过'
						classs = 'success'
						name = "checkmark-circle-fill"
						break;
					case '2':
						value = '审核驳回'
						classs = 'faile'
						name = "close-circle-fill"
						break;
					default:
						break;
				}
				return {
					value,
					class: classs,
					name: name,
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statusCard {
		padding: 20rpx;
		box-sizing: border-box;
		color: #fff;
	}

	.warning {
		background-color: #FFC107;
	}

	.success {
		background-color: #28a745;
	}

	.faile {
		background-color: #dc3545;
	}
</style>